<template>
    <view class="content">
        <!-- <u-navbar :background="background" :border-bottom="false" :immersive="true" :is-back="false"></u-navbar> -->
        
        <view class="wrapper">
            <view class="ad">
                <view class="top">
                    <view class="top-img">
                        <view style="margin: auto;width: 750rpx;height: 470rpx;">
                            <u-swiper :list="slideList" width="750" height="470" border-radius="0" mode="dot"
                                @click="toGuangGao($event, data.rotation_image)"></u-swiper>
                        </view>
                    </view>
                </view>
                <image src="../../static/image/logo.png" class="logo"></image>
            </view>
            
            <!-- 进行中活动 -->
            <view class="box">
                <view class="tit">
                    <view class="title">进行中活动</view>
                    <view class="more" @click="toPage('/pages/activity/list')">查看更多</view>
                </view>
                <view class="item" v-for="(item, index) in data.activity" :key="index" v-if="index < 2"
                    @click="toPage('/pages/activity/details?id=' + item.id)">
                    <image :src="item.image" class="act-img"></image>
                    <view class="item-right">
                        <view class="time">{{item.enroll_start}}-{{item.enroll_end}}</view>
                        <view class="name">{{item.title}}</view>
                        <view class="start">活动开始：{{item.start_time}}</view>
                        <view class="nums" v-if="data.is_enroll == 1">
                            <image src="../../static/icon/us.png" class="us"></image>
                            报名人数：<text class="num">{{item.num}}</text>/{{item.enroll_num}}
                        </view>
                        <!-- status 1活动进行中（报名未结束）、2进行中（报名已结束）、 3活动已结束 -->
                        <view class="item-down">
                            <view class="btn" v-if="item.status == 1">立即报名</view>
                            <view class="btn btn2" v-if="item.status == 2">报名结束</view>
                        </view>
                    </view>
                </view>
                
                <view style="text-align: center;padding: 30upx 0;color: #999;font-size: 24rpx;" v-if="data && data.activity && data.activity.length == 0">暂无相关信息</view>
            </view>
            <!-- 往期活动 -->
            <view class="before-box">
                <view class="tit">
                    <view class="title">往期活动</view>
                    <view class="more" @click="toPage('/pages/activity/before-list')">查看更多</view>
                </view>
                <view class="nav" v-if="data && data.activity_type && data.activity_type.length > 0">
                    <scroll-view scroll-x>
                        <view class="nav-i">
                            <view class="nav-i2" :class="{isNav : cateId == item.id}" 
                                v-for="(item, index) in data.activity_type" :key="index" @click="change(item)">
                                {{item.name}}
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="b-item" v-for="(item, index) in bList" :key="index" v-if="index < 3"
                    @click="toPage('/pages/activity/details?id=' + item.id)">
                    <image :src="item.image" class="b-img"></image>
                    <view class="b-item-right">
                        <view class="b-name">{{item.title}}</view>
                        <view class="b-time">
                            <image src="../../static/icon/time_04.png" class="time-04"></image>
                            {{item.start_time}} - {{item.end_time}}
                        </view>
                    </view>
                    <image src="../../static/icon/arrow_r.png" class="arrow-r"></image>
                </view>
                <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="bList && bList.length == 0">暂无相关信息</view>
            </view>
        </view>
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#40bef1" height="110" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [
                    {
                        iconPath: "/static/icon/tab.png",
                        selectedIconPath: "/static/icon/tab.png",
                        text: '',
                        pagePath: "/pages/tabbar/index",
                        customIcon: false
                    },{
                        iconPath: "/static/icon/tab_01.png",
                        selectedIconPath: "/static/icon/tab_02.png",
                        text: '活动',
                        customIcon: false,
                        pagePath: "/pages/tabbar/activity"
                    },{
                        iconPath: "/static/icon/tab_03.png",
                        selectedIconPath: "/static/icon/tab_04.png",
                        text: '商务合作',
                        customIcon: false,
                        pagePath: "/pages/tabbar/work"
                    },{
                        iconPath: "/static/icon/tab_05.png",
                        selectedIconPath: "/static/icon/tab_06.png",
                        text: '城会玩',
                        customIcon: false,
                        pagePath: "/pages/tabbar/city-games"
                    },{
                        iconPath: "/static/icon/tab_07.png",
                        selectedIconPath: "/static/icon/tab_08.png",
                        text: '个人中心',
                        customIcon: false,
                        pagePath: "/pages/tabbar/mine"
                    }
                ],
                slideList: [],
                data: {},
                cateId: '',
                bList: [],
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	} 
            });
        },
        onShow() {
            this.getIndexDate()
        },
        methods: {
            toPage(url) {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/loginH')
                } else {
                    this.$gTo(url)
                }
            },
            
            change(item) {
                if (this.cateId == item.id) return
                this.cateId = item.id
                this.bList = item.activity
            },
            
            // 获取首页数据
            getIndexDate() {
                this.$ajax('index', {
                    // user_token: this.$getSync('userToken'),
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                        this.slideList = []
                        if (ret.detail.rotation_image.length > 0) {
                            ret.detail.rotation_image.forEach(cur => {
                                this.slideList.push({image: cur.image})
                            })
                        }
                        if (ret.detail.activity_type.length > 0) {
                            this.cateId = ret.detail.activity_type[0].id
                            this.bList = ret.detail.activity_type[0].activity
                        }
                        
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 轮播跳转 type: 0无连接 1活动 2合作
            toGuangGao(e, array) {
                if (!uni.getStorageSync('userToken')) {
                    uni.navigateTo({
                        url: '/pages/login/login'
                    });
                } else {
                    if (array[e].type == 1) {
                        this.$gTo('/pages/activity/details?id=' + array[e].link_id)
                    } else if (array[e].type == 2) {
                        this.$gTo('/pages/word-details/word-details?id=' + array[e].link_id)
                    }
                }
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            // onPageScroll: function(e) {
            // 	//nvue暂不支持滚动监听，可用bindingx代替
            // 	// console.log("滚动距离为：" + e.scrollTop);
            // 	let a = e.scrollTop * 0.05;
            // 	if (a > 1) {
            // 		a = 1;
            // 	}
            // 	if (e.scrollTop == 0) {
            // 		this.background.backgroundColor = 'rgba(64,190,241,0)';
            // 	} else {
            // 		this.background.backgroundColor = 'rgba(64,190,241,' + a + ')';
            // 	}
            // }, 
        }
    };
</script>

<style >
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx;
    	height: 50rpx;
    }
    
</style>

<style lang="scss">
    /deep/.u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 132rpx !important;
        height: 50rpx !important;
        margin-top: 15rpx;
    }
    
    page{
        background-color: #f5f6fa;
    }
    .ad{
        position: relative;
    }
    .top{
        width: 100%;
        height: 480rpx;
        position: relative;
    }
    .top::after{
        content: '';
        width: 180%;
        height: 480rpx;
        position: absolute;
        left: -40%;
        top: 0;
        z-index: -1;
        border-radius: 0 0 50% 50%;
        background-color: #92ddf2;
    }
    .top-img{
        width: 150%;
        height: 470rpx;
        overflow: hidden;
        position: absolute;
        left: -25%;
        top: 0;
        border-radius: 0 0 80% 80%;
    }
    .img{
        width: 750rpx;
        height: 470rpx;
        margin: auto;
    }
    .logo{
        width: 193rpx;
        height: 117rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -58rpx;
        z-index: 1;
    }
    
    
    .box{
        padding: 90rpx 30rpx 30rpx;
    }
    .tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30rpx;
    }
    .title{
        font-size: 42rpx;
        font-weight: bold;
        padding-left: 25rpx;
        position: relative;
    }
    .title::after{
        content: '';
        display: block;
        width: 12rpx;
        height: 39rpx;
        background-color: #40bef1;
        position: absolute;
        left: 0;
        top: 10rpx;
    }
    .more{
        font-size: 24rpx;
        color: #7d7d7d;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
    }
    .act-img{
        width: 220rpx;
        height: 320rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .item-right{
        flex: 1;
    }
    .time{
        font-size: 24rpx;
        color: #a5a5a5;
        padding-bottom: 10rpx;
    }
    .name{
        font-size: 28rpx;
        font-weight: bold;
        line-height: 32rpx;
        height: 64rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .start{
        font-size: 24rpx;
        padding: 10rpx 0;
    }
    .nums{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 22rpx;
        padding: 7rpx 15rpx;
        background-color: #f5f5f5;
    }
    .us{
        width: 23rpx;
        height: 19rpx;
        margin-right: 7rpx;
    }
    .num{
        font-size: 28rpx;
        color: #f62a2a;
    }
    .item-down{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-top: 50rpx;
    }
    .btn{
        width: 158rpx;
        height: 56rpx;
        font-size: 26rpx;
        color: #7d664b;
        line-height: 56rpx;
        text-align: center;
        background: linear-gradient(to top, #ffdbad, #fff4e4);
        border-radius: 15rpx;
    }
    .btn2{
        color: #fff;
        background: #808080;
    }
    
    
    .before-box{
        background-color: #fff;
        padding: 30rpx;
    }
    .nav{
        width: 690rpx;
        white-space: nowrap;
        padding-bottom: 20rpx;
    }
    .nav-i{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-i2{
        background-color: #efefef;
        font-size: 26rpx;
        line-height: 1;
        color: #a5a5a5;
        margin-right: 20rpx;
        padding: 18rpx 65rpx;
    }
    .isNav{
        color: #fff;
        background-color: #40bef1;
    }
    .b-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #efefef;
        padding: 20rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .b-img{
        width: 111rpx;
        height: 111rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    .b-item-right{
        flex: 1;
    }
    .b-name{
        width: 460rpx;
        font-size: 28rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 10rpx;
    }
    .b-time{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 22rpx;
        color: #7d7d7d;
    }
    .time-04{
        width: 18rpx;
        height: 18rpx;
        margin-right: 6rpx;
    }
    .arrow-r{
        width: 26rpx;
        height: 8rpx;
        margin-left: 10rpx;
    }
    
    

</style>
